<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>附件管理中心</title>
<link href="/static/common/attach/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/static/common/attach/css/zh-cn-system.css" rel="stylesheet" type="text/css" />
<link href="/static/common/attach/css/table_form.css" rel="stylesheet" type="text/css" />
<link href="/static/plugin/plupload/swfupload.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="/static/plugin/jquery/jquery-3.4.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/plugin/plupload/handlers.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/plugin/plupload/js/plupload.full.min.js"></script>
<style type="text/css">html{_overflow-y:scroll}</style>
<script>
    //上传类型
	let _m={$module};
	var file_num={$num};//文件上传数量
	var dx=file_num>1?true:false; //是否多选
    var exts_allow="{$pl_exts}"; //允许上传的文件后缀
    var size_allow="{$sizes}mb"; //允许上传的文件大小
	$(function(){
			var pconfig={
				browse_button : "addnew", //点击触发文件选择框
				url :"/index.php/api/attach/edit?module="+_m,
				flash_swf_url : '__PLUGIN__/plupload/js/Moxie.swf', //swf文件
        		silverlight_xap_url : '__PLUGIN__/plupload/js/Moxie.xap', //silverlight文件
        		multi_selection: dx,
        		filters: {
					mime_types : [{title:"file_types",extensions:exts_allow}],
					max_file_size : size_allow, //最大只能上传文件尺寸
					prevent_duplicates : true //允许选取重复文件,true不允许
				},
				file_data_name : 'Filedata', //文件上传名
				runtimes :"flash,html5,silverlight,html4"
			};

			var uploader = new plupload.Uploader(pconfig);
			uploader.init();

			//点击开始上传、
			$("#btupload").click(function(){
				uploader.start();
			});


			function removeFile(fid){
				uploader.removeFile(fid);
			}

			//filelist是uploader上传队列 ; display是列表展示js数组 ; 通过与上传队列对比，来确定展示的内容
			function ck_files(filelist,display){
				if(display.length===0){
					return [];
				}
				let kary=[];
				//有展示内容
				for(x in filelist){
					let ckfid=filelist[x].id;
					if($("#fsUploadProgress #"+ckfid).length===1 && $("#fsUploadProgress #"+ckfid) !== 'undefined'){
						kary.push(ckfid);
					}
				}
				return kary;
			}

				//未上传时的删除方法
			$(document).on('click','a.progressCancel',function(){
				let fid=$(this).attr('fid');
				let file_obj=uploader.getFile(fid);
				$("#fsUploadProgress").find("#"+fid).remove();
				uploader.removeFile(file_obj);
			})

			//文件添加到上队列后触发的 监听函数
    		uploader.bind('FilesAdded', function(uploader, files) {
		          if(uploader.files.length>file_num){ // 最多上传3张图 ，可用php数量变量
			            dary=uploader.splice(file_num,999);
			            alert('最多'+file_num+'个');
			        }
			        let display=$("#fsUploadProgress").children();
			        let test=ck_files(uploader.files,display);
		        var html = '';
		        //pluoload.each(文件对象，索引)
		        plupload.each(uploader.files, function(file,index) {

		        	if(test.indexOf(file.id)==-1){
		        		html+='<div class="progressWrapper" id="'+file.id+'">'+
		        '<div class="progressContainer">'+
		        '<a class="progressCancel" href="javascript:;" fid="'+file.id+'" style="visibility: visible;"></a>'+
		        '<div class="progressName">'+file.name+'</div>'+
		        '<div class="progressBarStatus">&nbsp;</div>'+
		        '<div class="progressBarInProgress"></div>'+
		        '</div></div>';
		        	}

		        });
		        $("#fsUploadProgress").prepend(html);
		      });

    		//进度条展示
    		uploader.bind('UploadProgress',function(uploader,file){
    			//文字div
		        var progress=$("#"+file.id).find(".progressBarInProgress");
		        progress.css('width',file.percent+'%');
		        //进度条宽度div
		        var progressBarStatus=$("#"+file.id).find(".progressBarStatus");
		        progressBarStatus.text(file.percent+'%');
		    });

    		//错误提示
			uploader.bind('Error', function(uploader, err) {
		        var tstr='';
		        switch(err.code){
                    case -601:tstr="文件格式错误";break;
                    case -600:tstr="文件尺寸太大";break;
                    default:tstr="其他错误";
                }

                errmsg(err.message,tstr);
		      });


			//发生错误时提示信息
			function errmsg(err,tstr){
                var timer=null;
                var $undefined=null;
                var html='<div class="progressWrapper" id="undefined" style="opacity: 1;"><div class="progressContainer red"><a class="progressCancel" href="#" style="visibility: hidden;"> </a><div class="progressName">'+err+'</div><div class="progressBarStatus">'+tstr+'</div><div class="progressBarError"></div></div></div>';

                //向首部插入
                $undefined=$("#fsUploadProgress").find("#undefined") ? $("#fsUploadProgress").find("#undefined") : null;
                if($undefined.length==0){
                    $("#fsUploadProgress").prepend(html);
                }else{
                    //将自己替换
                    $undefined.replaceWith(html);
                }

                //倒计时隐藏
                timer=setTimeout(function(){
                    clearTimeout(timer);
                    $("#fsUploadProgress").find("#undefined").remove();
                },3000);
            }


			//上传至服务器的回调结果
			uploader.bind('FileUploaded',function(uploader,files,data){
                var imgInfo=data.response;
                var imgArr=imgInfo.split(',');
                var num=imgArr[0];
                if(num==-1){
                    errmsg(num,imgArr[1]);
                    uploader.removeFile(files.id); //移除文件可以重新选择上传
                    $("#"+files.id).remove();
                    return false;
                }

                var imgSrc=imgArr[1]; //文件展示路径
                var filePath=imgArr[1]; //文件路径
                var imgName=imgArr[3];
                var imgState=imgArr[2];

				//获取隐藏路径标签元素
				var attStatus=$("#att-status"); //图片路径
				var attName=$("#att-name"); //图片名称

				//根据上传类型判断展示图片
				switch(_m){
					case 1:
						imgSrc='/static/common/attach/ext/rar.png';
					break;
					case 2:
						imgSrc='/static/common/attach/ext/flv.png';
					break;
					default:
				}
				//创建缩略图展示html
				var html='<li><div id="attachment_'+num+'" class="img-wrap"><a href="javascript:;" onclick="javascript:att_cancel(this,'+num+',\'upload\')" class="on"><div class="icon"></div><img src="'+imgSrc+'" width="80" imgid="'+num+'" path="'+filePath+'" title="'+imgName+'"></a></div></li>';

				//改变进度条文本框类，隐藏。
				$("#"+files.id).addClass('progresshidden');
				$("#"+files.id).css('opacity','1');
				$("#fsUploadProgress").append(html);

				//添加回调函数查找的值。
				attStatus.append('|'+filePath);
				attName.append('|'+imgName);
			});

			//移除事件
			uploader.bind('FilesRemoved',function(uploader,files){
					let len=files.length;
					for(let i=0; i<len;i++){
						let fid=files[i].id;
						uploader.removeFile(fid);
					}
			});
	})

</script>


<div class="pad-10">
    <div class="col-tab">
        <ul class="tabBut cu-li">
            <li id="tab_swf_1" class="on" onclick="SwapTab('swf','on','',5,1);">上传附件</li>
            <li id="tab_swf_2" onclick="SwapTab('swf','on','',5,2);">网络文件</li>
            <li id="tab_swf_3" onclick="SwapTab('swf','on','',5,3);set_iframe('album_list','{:url('search',array('module'=>$module,'num'=>$num))}');">数据库</li>
        </ul>

         <div id="div_swf_1" class="content pad-10 ">
        	<div>
				<div class="addnew" id="addnew">
					<span id="buttonPlaceHolder"></span>
				</div>
				<input type="button" id="btupload" value="开始上传"  />
                <div id="nameTip" class="onShow">最多上传<font color="red"> {$num}</font> 个附件,单文件最大 <font color="red">{$sizes} MB</font></div>
                <div class="bk3"></div>

                <div class="lh24">支持 <font style="font-family: Arial, Helvetica, sans-serif">{$exts}</font> 格式。</div>
				</div>
    		<div class="bk10"></div>
        	<fieldset class="blue pad-10" id="swfupload">
        	<legend>列表</legend>
        	<ul class="attachment-list"  id="fsUploadProgress">
        	</ul>
    		</fieldset>
    	</div>

        <div id="div_swf_2" class="contentList pad-10 hidden">
        <div class="bk10"></div>
        	请输入网络地址<div class="bk3"></div><input type="text" name="info[filename]" class="input-text" value=""  style="width:350px;"  onblur="addonlinefile(this)">
		<div class="bk10"></div>
        </div>

    	<div id="div_swf_3" class="contentList pad-10 hidden">
            <ul class="attachment-list">
        	 <iframe name="album-list" src="#" frameborder="false" scrolling="no" style="overflow-x:hidden;border:none" width="100%" height="345" allowtransparency="true" id="album_list"></iframe>
        	</ul>
        </div>


    <div id="att-status" class="hidden"></div>
    <div id="att-status-del" class="hidden"></div>
    <div id="att-name" class="hidden"></div>

</div>
</body>
<script type="text/javascript">
function imgWrap(obj){
	$(obj).hasClass('on') ? $(obj).removeClass("on") : $(obj).addClass("on");
}

function SwapTab(name,cls_show,cls_hide,cnt,cur) {
    for(i=1;i<=cnt;i++){
		if(i==cur){
			 $('#div_'+name+'_'+i).show();
			 $('#tab_'+name+'_'+i).addClass(cls_show);
			 $('#tab_'+name+'_'+i).removeClass(cls_hide);
		}else{
			 $('#div_'+name+'_'+i).hide();
			 $('#tab_'+name+'_'+i).removeClass(cls_show);
			 $('#tab_'+name+'_'+i).addClass(cls_hide);
		}
	}
}

function addonlinefile(obj) {
	var strs = $(obj).val() ? '|'+ $(obj).val() :'';
	$('#att-status').html(strs);
}

function change_params(){
	if($('#watermark_enable').attr('checked')) {
		swfu.addPostParam('watermark_enable', '1');
	} else {
		swfu.removePostParam('watermark_enable');
	}
}
function set_iframe(id,src){
	$("#"+id).attr("src",src);
}

function album_cancel(obj,id,source){
	var src = $(obj).children("img").attr("path"); //获取当前对象的子元素图片路径
	var filename = $(obj).attr('title');
	if($(obj).hasClass('on')){ //如果选中
		$(obj).removeClass("on");
		var imgstr = $("#att-status").html();
		var length = $("a[class='on']").children("img").length;
		console.log(length);
		var strs = filenames = '';
		for(var i=0;i<length;i++){
			strs += '|'+$("a[class='on']").children("img").eq(i).attr('path');
			filenames += '|'+$("a[class='on']").children("img").eq(i).attr('title');
		}
		$('#att-status').html(strs);
		$('#att-status').html(filenames);
	} else {
		var num = $('#att-status').html().split('|').length;
		var file_upload_limit = '{$num}';
		if(num > file_upload_limit) {alert('不能选择超过'+file_upload_limit+'个附件'); return false;}
		$(obj).addClass("on");
		//$.get('{:url('Attachment/edit',array('module'=>0))}?aid='+id+'&src='+source+'&filename='+filename);
		$('#att-status').append('|'+src);
		$('#att-name').append('|'+filename);
	}
}

</script>
</html>
